<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./3D正方体+js效果.css">
</head>

<body>
    <div id="max">
        <!-- 控制台 -->
        <div id="console">
            <h3 id="Size-title">大小</h3>
            <button id="size1">超大</button>
            <button id="size2">中等</button>
            <button id="size3">正常</button>
            <button id="size4">最小</button>
            <h3 id="Color-title">颜色</h3>
            <button id="color1">#74C0D3</button>
            <button id="color2">#FFF0F5</button>
            <button id="color3">#7FFFD4</button>
            <button id="color4">#00F5FF</button>
            <button id="Yes">确定</button>
            <button id="No">取消</button>
        </div>
        <div id="box">
            <div id="top1"> <!-- <img id="img" src="./美女/1.jpg" alt=""> --></div>
            <div id="bottom"></div>
            <div id="left"></div>
            <div id="right"></div>
            <div id="front"></div>
            <div id="back"></div>
        </div>
    </div>
        <div class="console2">
            <button id="sart">点击开始</button>
        </div>
        <video src="./【视频模板】大气科技城市_样片_潮点视频.mp4" autoplay="autoplay" muted="muted" loop ></video>
    <script>
        var max = document.getElementById('max')
        var box = document.getElementById('box')
        var top1 = document.getElementById('top1')
        var bottom = document.getElementById('bottom')
        var left = document.getElementById('left')
        var right = document.getElementById('right')
        var front = document.getElementById('front')
        var back = document.getElementById('back')
        var console = document.getElementById('console')
        var size1 = document.getElementById('size1')
        var size2 = document.getElementById('size2')
        var size3 = document.getElementById('size3')
        var size4 = document.getElementById('size4')
        var color1 = document.getElementById('color1')
        var color2 = document.getElementById('color2')
        var color3 = document.getElementById('color3')
        var color4 = document.getElementById('color4')
        var color5 = document.getElementById('color5')
        var color6 = document.getElementById('color6')
        var Yes = document.getElementById('Yes')
        var No = document.getElementById('No')
        var sart = document.getElementById('sart')
        size1.onclick = function () {
            box.onmouseover = function () {
                top1.style.width = "380px"
                top1.style.height = "380px"
                top1.style.transform = "translateY(300px)rotateX(90deg)"

                bottom.style.width = "380px"
                bottom.style.height = "380px"
                bottom.style.transform = "translateY(-300px)rotateX(-90deg)"

                left.style.width = "380px"
                left.style.height = "380px"
                left.style.transform = "translateX(300px)rotateY(-90deg)"

                right.style.width = "380px"
                right.style.height = "380px"
                right.style.transform = "translateX(-300px)rotateY(90deg)"

                front.style.width = "380px"
                front.style.height = "380px"
                front.style.transform = "translateZ(-300px)"

                back.style.width = "380px"
                back.style.height = "380px"
                back.style.transform = "translateZ(300px)"
            }
            box.onmouseout = function () {
                top1.style.width = "380px"
                top1.style.height = "380px"
                top1.style.transform = "translateY(-200px)rotateX(90deg)"

                bottom.style.width = "380px"
                bottom.style.height = "380px"
                bottom.style.transform = "translateY(200px)rotateX(-90deg)"

                left.style.width = "380px"
                left.style.height = "380px"
                left.style.transform = "translateX(-200px)rotateY(-90deg)"

                right.style.width = "380px"
                right.style.height = "380px"
                right.style.transform = "translateX(200px)rotateY(90deg)"

                front.style.width = "380px"
                front.style.height = "380px"
                front.style.transform = "translateZ(200px)"

                back.style.width = "380px"
                back.style.height = "380px"
                back.style.transform = "translateZ(-200px)"
            }
            top1.style.width = "380px"
            top1.style.height = "380px"
            top1.style.transform = "translateY(-200px)rotateX(90deg)"

            bottom.style.width = "380px"
            bottom.style.height = "380px"
            bottom.style.transform = "translateY(200px)rotateX(-90deg)"

            left.style.width = "380px"
            left.style.height = "380px"
            left.style.transform = "translateX(-200px)rotateY(-90deg)"

            right.style.width = "380px"
            right.style.height = "380px"
            right.style.transform = "translateX(200px)rotateY(90deg)"

            front.style.width = "380px"
            front.style.height = "380px"
            front.style.transform = "translateZ(200px)"

            back.style.width = "380px"
            back.style.height = "380px"
            back.style.transform = "translateZ(-200px)"
        }
        size2.onclick = function () {
            box.onmouseover = function () {
                top1.style.width = "280px"
                top1.style.height = "280px"
                top1.style.transform = "translateY(250px)rotateX(45deg)"

                bottom.style.width = "280px"
                bottom.style.height = "280px"
                bottom.style.transform = "translateY(-250px)rotateX(-45deg)"

                left.style.width = "280px"
                left.style.height = "280px"
                left.style.transform = "translateX(250px)rotateY(-45deg)"

                right.style.width = "280px"
                right.style.height = "280px"
                right.style.transform = "translateX(-250px)rotateY(45deg)"

                front.style.width = "280px"
                front.style.height = "280px"
                front.style.transform = "translateZ(-250px)"

                back.style.width = "280px"
                back.style.height = "280px"
                back.style.transform = "translateZ(250px)"

                box.style.transform="rotateX(-45deg)rotate(45deg)rotateY(360deg)"
            }
            box.onmouseout = function () {
                top1.style.width = "280px"
                top1.style.height = "280px"
                top1.style.transform = "translateY(150px)rotateX(90deg)"

                bottom.style.width = "280px"
                bottom.style.height = "280px"
                bottom.style.transform = "translateY(-150px)rotateX(-90deg)"

                left.style.width = "280px"
                left.style.height = "280px"
                left.style.transform = "translateX(150px)rotateY(-90deg)"

                right.style.width = "280px"
                right.style.height = "280px"
                right.style.transform = "translateX(-150px)rotateY(90deg)"

                front.style.width = "280px"
                front.style.height = "280px"
                front.style.transform = "translateZ(-150px)"

                back.style.width = "280px"
                back.style.height = "280px"
                back.style.transform = "translateZ(150px)"
                box.style.transform="rotateX(-45deg)rotate(45deg)rotateY(-360deg)"
            }
            top1.style.width = "280px"
            top1.style.height = "280px"
            top1.style.transform = "translateY(-150px)rotateX(90deg)"

            bottom.style.width = "280px"
            bottom.style.height = "280px"
            bottom.style.transform = "translateY(150px)rotateX(-90deg)"

            left.style.width = "280px"
            left.style.height = "280px"
            left.style.transform = "translateX(-150px)rotateY(-90deg)"

            right.style.width = "280px"
            right.style.height = "280px"
            right.style.transform = "translateX(150px)rotateY(90deg)"

            front.style.width = "280px"
            front.style.height = "280px"
            front.style.transform = "translateZ(150px)"

            back.style.width = "280px"
            back.style.height = "280px"
            back.style.transform = "translateZ(-150px)"
        }
        size3.onclick = function () {
            box.onmouseover = function () {
                top1.style.width = "180px"
                top1.style.height = "180px"
                top1.style.transform = "translateY(-380px)translateX(60px)rotateX(0deg)"

                bottom.style.width = "180px"
                bottom.style.height = "180px"
                bottom.style.transform = "translateY(300px)translateX(-85px)rotateX(0deg)"

                left.style.width = "180px"
                left.style.height = "180px"
                left.style.transform = "translateX(-350px)translateY(27px) rotateY(0deg)"

                right.style.width = "180px"
                right.style.height = "180px"
                right.style.transform = "translateX(330px)translateY(-115px)rotateY(0deg)"

                front.style.width = "180px"
                front.style.height = "180px"
                front.style.transform = "translateZ(200px)translateX(-20px) translateY(-50px)"

                back.style.width = "180px"
                back.style.height = "180px"
                back.style.transform = "translateZ(-200px)translateX(-5px)translateY(-35px)"

                box.style.transform="rotateX(-45deg)rotate(45deg)rotateZ(360deg)rotateX(360deg)"
            }
            box.onmouseout = function () {
                top1.style.width = "180px"
                top1.style.height = "180px"
                top1.style.transform = "translateY(100px)rotateX(90deg)"

                bottom.style.width = "180px"
                bottom.style.height = "180px"
                bottom.style.transform = "translateY(-100px)rotateX(-90deg)"

                left.style.width = "180px"
                left.style.height = "180px"
                left.style.transform = "translateX(100px)rotateY(-90deg)"

                right.style.width = "180px"
                right.style.height = "180px"
                right.style.transform = "translateX(-100px)rotateY(90deg)"

                front.style.width = "180px"
                front.style.height = "180px"
                front.style.transform = "translateZ(-100px)"

                back.style.width = "180px"
                back.style.height = "180px"
                back.style.transform = "translateZ(100px)"
                box.style.transform="rotateX(-45deg)rotate(45deg)rotateZ(-360deg)rotate(-360deg)"
            }
            top1.style.width = "180px"
            top1.style.height = "180px"
            top1.style.transform = "translateY(-100px)rotateX(90deg)"

            bottom.style.width = "180px"
            bottom.style.height = "180px"
            bottom.style.transform = "translateY(100px)rotateX(-90deg)"

            left.style.width = "180px"
            left.style.height = "180px"
            left.style.transform = "translateX(-100px)rotateY(-90deg)"

            right.style.width = "180px"
            right.style.height = "180px"
            right.style.transform = "translateX(100px)rotateY(90deg)"

            front.style.width = "180px"
            front.style.height = "180px"
            front.style.transform = "translateZ(100px)"

            back.style.width = "180px"
            back.style.height = "180px"
            back.style.transform = "translateZ(-100px)"
        }
        size4.onclick = function () {
            box.onmouseover = function () {
                top1.style.width = "80px"
                top1.style.height = "80px"
                top1.style.transform = "translateY(-150px) rotateX(90deg)"

                bottom.style.width = "80px"
                bottom.style.height = "80px"
                bottom.style.transform = "translateY(120px)translateX(-30px) rotateX(-90deg)"

                left.style.width = "80px"
                left.style.height = "80px"
                left.style.transform = "translateX(-150px) rotateY(-90deg)"

                right.style.width = "80px"
                right.style.height = "80px"
                right.style.transform = "translateX(120px)translateY(-30px) rotateY(90deg)"

                front.style.width = "80px"
                front.style.height = "80px"
                front.style.transform = "translateZ(150px)rotateZ(90deg)"

                back.style.width = "80px"
                back.style.height = "80px"
                back.style.transform = "translateZ(-190px)"

                box.style.transform="rotateX(-45deg)rotate(45deg)rotateY(360deg)"
            }
            box.onmouseout = function () {
                top1.style.width = "80px"
                top1.style.height = "80px"
                top1.style.transform = "translateY(50px)rotateX(90deg)"

                bottom.style.width = "80px"
                bottom.style.height = "80px"
                bottom.style.transform = "translateY(-50px)rotateX(-90deg)"

                left.style.width = "80px"
                left.style.height = "80px"
                left.style.transform = "translateX(50px)rotateY(-90deg)"

                right.style.width = "80px"
                right.style.height = "80px"
                right.style.transform = "translateX(-50px)rotateY(90deg)"

                front.style.width = "80px"
                front.style.height = "80px"
                front.style.transform = "translateZ(-50px)"

                back.style.width = "80px"
                back.style.height = "80px"
                back.style.transform = "translateZ(50px)"
                box.style.transform="rotateX(-45deg)rotate(45deg)rotateY(-360deg)"
            }
            top1.style.width = "80px"
            top1.style.height = "80px"
            top1.style.transform = "translateY(-50px)rotateX(90deg)"

            bottom.style.width = "80px"
            bottom.style.height = "80px"
            bottom.style.transform = "translateY(50px)rotateX(-90deg)"

            left.style.width = "80px"
            left.style.height = "80px"
            left.style.transform = "translateX(-50px)rotateY(-90deg)"

            right.style.width = "80px"
            right.style.height = "80px"
            right.style.transform = "translateX(50px)rotateY(90deg)"

            front.style.width = "80px"
            front.style.height = "80px"
            front.style.transform = "translateZ(50px)"

            back.style.width = "80px"
            back.style.height = "80px"
            back.style.transform = "translateZ(-50px)"
        }
        color1.onclick = function () {
            top1.style.backgroundColor = "rgba(156, 207, 36, 0.3)"

            bottom.style.backgroundColor = "rgba(39, 167, 160, 0.3)"

            left.style.backgroundColor = "rgba(39, 167, 160, 0.3)"

            right.style.backgroundColor = "rgba(224, 213, 54, 0.3)"

            front.style.backgroundColor = "rgba(142, 48, 219, 0.3)"

            back.style.backgroundColor = "rgba(233, 49, 178, 0.3)"
        }
        color2.onclick = function () {
            top1.style.backgroundColor = "rgba(212, 48, 89, 0.3)"

            bottom.style.backgroudnColor = "rgba(216, 102, 131, 0.3)"

            left.style.backgroundColor = "rgba(209, 117, 236, 0.3)"

            right.style.backgroundColor = "rgba(85, 178, 231, 0.3)"

            front.style.backgroundColor = "rgba(25, 153, 228, 0.3)"

            back.style.backgroundColor = "rgba(26, 214, 173, 0.3)"
        }
        color3.onclick = function () {
            top1.style.backgroundColor = "rgba(26, 201, 214, 0.3)"

            bottom.style.backgroundColor = "rgba(26, 201, 214, 0.3)"

            left.style.backgroundColor = "rgba(26, 201, 214, 0.3)"

            right.style.backgroundColor = "rgba(26, 201, 214, 0.3)"

            front.style.backgroundColor = "rgba(26, 201, 214, 0.3)"

            back.style.backgroundColor = "rgba(26, 201, 214, 0.3)"
        }
        color4.onclick = function () {
            top1.style.backgroundColor = "rgba(148, 214, 26, 0.3)"

            bottom.style.backgroundColor = "rgba(148, 214, 26, 0.3)"

            left.style.backgroundColor = "rgba(148, 214, 26, 0.3)"

            right.style.backgroundColor = "rgba(148, 214, 26, 0.3)"

            front.style.backgroundColor = "rgba(148, 214, 26, 0.3)"

            back.style.backgroundColor = "rgba(148, 214, 26, 0.3)"
        }
        Yes.onclick=function(){
            
        }
        No.onclick=function(){
            console.style.opacity="0"
        }
        sart.onclick=function(){
            console.style.opacity="1"
        }
    </script>
</body>

</html>